<!-- src/components/Message/index.vue -->
<template>
  <transition name="slide-down">
    <div v-if="visible" class="message" @click="close">
      <div class="message_content" :class="typeClass">
        <span>{{ message }}</span>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      message: '',
      type: 'info' // info, success, error, warning
    }
  },
  computed: {
    typeClass() {
      return `message--${this.type}`
    }
  },
  methods: {
    show(options) {
      // 支持字符串或对象
      if (typeof options === 'string') {
        this.message = options
      } else {
        this.message = options.message
        this.type = options.type || 'info'
      }
      this.visible = true

      // 3秒后自动关闭
      setTimeout(() => {
        this.close()
      }, 3000)
    },
    close() {
      this.visible = false
    }
  }
}
</script>

<style scoped>
.message {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  display: flex;
  justify-content: center;
}

.message_content {
  width: 100%;
  padding: 10px;
  color: white;
  font-size: 14px;
  text-align: center;
  border-radius: 0 0 5px 5px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  min-width: 200px;
}

/* 默认 */
.message--info {
  background-color: #ff7f4d;
}

/* 成功 */
.message--success {
  background-color: #42b983;
}

/* 错误 */
.message--error {
  background-color: #f56c6c;
}

/* 警告 */
.message--warning {
  background-color: #ff9900;
}

/* 动画 */
.slide-down-enter-active {
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s ease;
}

.slide-down-leave-active {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.6, 1), opacity 0.3s ease;
}

.slide-down-enter-from,
.slide-down-leave-to {
  transform: translateY(-100%);
  opacity: 0;
}

.slide-down-enter-to,
.slide-down-leave-from {
  transform: translateY(0);
  opacity: 1;
}
</style>